<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-user"></i> 角色权限配置
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row :gutter="20">
                 <el-col :span="10">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <i class="el-icon-user-solid"></i><span>角色</span>
                        </div>
                        <div class="role-box">
                            <div v-for="(role,index) in roles" :key="role" class="text item">
                                <el-link :type="selected==index?'danger':'warning'" @click="chooseRole(role,index)">{{role.desc}}</el-link>
                            </div>
                        </div>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </el-card>
                 </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <div style="position: absolute;top: 37%;">
                            <img style="width:150px;height:100px" alt="双箭头" src="../../assets/img/doublearrow.jpg" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <i class="el-icon-s-help"></i><span>权限</span>
                        </div>
                        <div class="permission-box">
                            <el-tree
                            ref="rightsTree"
                            :data="permissions"
                            :default-checked-keys="defaultCheckedKeys"
                            @check="handelCheck"
                            show-checkbox
                            node-key="id">
                            </el-tree>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import {getRolesPage,getPermission,getPermissionByRole,endowPermission} from '@/api'

export default {
    data () {
        return {
            roles: [],
            currentPage: 1,
            size: 10,
            total: 0,
            permissions: [],
            defaultCheckedKeys: [],
            selected: -1
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handelCheck(data){
            //阻止选中
            this.$nextTick(() => {
                this.$refs.rightsTree.setCheckedKeys(this.defaultCheckedKeys);
            })
            var ids = []
            if(data.children != null){
                var temp1 = {
                    permissionGroupId: data.id,
                    permissionIds: []
                }
                data.children.forEach(item => {
                    if(item.children != null){
                        var temp2 = {
                            permissionGroupId: item.id,
                            permissionIds: []
                        }
                        item.children.forEach(child => {
                            temp2.permissionIds.push(child.id)
                        })  
                        ids.push(temp2)
                    }else{
                        temp1.permissionIds.push(item.id)
                    }
                })
                if(temp1.permissionIds.length != 0)ids.push(temp1)
            }else{
                var temp = {
                    permissionGroupId: null,
                    permissionIds: []
                }
                temp.permissionIds.push(data.id)
                ids.push(temp)
            }
            var roleId =  this.roles[this.selected].id;
            var permissionGroupRoleIdPo ={
                roleId: roleId,
                ids: ids
            }
            endowPermission(permissionGroupRoleIdPo).then(res => {
                if(res.code == "0"){
                    this.chooseRole(this.roles[this.selected], this.selected)
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        chooseRole(role, index){
            getPermissionByRole(role.id).then(res => {
                this.$nextTick(() => {
                    this.defaultCheckedKeys = res.data;
                    this.$refs.rightsTree.setCheckedKeys(this.defaultCheckedKeys);
                });
                this.selected = index;
            })
        }
    },
    mounted () {
        getRolesPage(this.currentPage, this.size).then(res => {
            this.roles = res.data.records;
            this.total = res.data.total;
        })
        getPermission().then(res => {
            this.permissions = res.data
        });
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 25px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 440px;
}
.role-box{
    min-height: 400px;
}
.permission-box{
    min-height: 432px;
}
.grid-content {
    border-radius: 4px;
    min-height: 400px;
}
</style>